<template>
  <!-- 保存的任务 -->
  <div class="pagewrapper bg_fff">
    <div class="pagebox h_full flex">
      <div class="save_left plr-16">
        <div class="s_title fw-6">转发任务列表</div>
        <div class="s_list">
          <div
            v-for="(item, index) in dataList"
            :key="index"
            class="s_item flexbetween mb-8 commhover br_4"
            :class="{ active: rowitem && rowitem.id == item.id }"
            @click="handleItem(item)"
          >
            <div class="s_itemleft">
              <div class="w_full s_text textover line_h_22">
                {{ item.title || "--" }}
              </div>
              <div class="f-12 c_text3 textover line_h_22">
                创建时间：2024-04-15 14:04:01
              </div>
            </div>
            <div class="s_itemright flexend c_text2">
              <i v-hasPermi="['system:multigroupforward:editname']" class="el-icon-edit mr-6 fw-5 f-15"></i>
              <i v-hasPermi="['system:multigroupforward:deletetask']" class="el-icon-delete fw-5 f-15"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="save_right">
        <div class="s_title plr-16 fw-6">转发内容</div>
        <div class="r_content">
          <div v-if="rowitem" class="f-15">
            <MaterialContent
              ref="material"
              v-model="rowitem.taskList"
              :showTool="false"
              :hasborder="false"
              :leftType="2"
              :removeIcon="false"
            />
            <!-- <div
              v-for="(item, index) in rowitem.taskList"
              :key="index"
              class="rlist_item flex aligncenter flexwarp justifystart p-10"
            >
              <el-checkbox
                v-model="item.checked"
                style="margin: 0px 16px 0px 6px"
              >
                <span class="c_text"></span>
              </el-checkbox>
              <div class="flex aligncenter chat-item-content">
                <div class="chat-bubble">测试士大夫</div>
              </div>
              <div class="actionlist">
                
              </div>
            </div> -->
          </div>
        </div>
        <div class="r_footer flexbetween plr-12">
          <el-checkbox v-model="checkedAll">
            <span class="c_text">全选</span>
          </el-checkbox>
          <div>
            <el-button v-hasPermi="['system:multigroupforward:tranfer']" size="small" plain @click="handleTranfer(1)"
              >部分转发</el-button
            >
            <el-button v-hasPermi="['system:multigroupforward:tranferall']" size="small" plain @click="handleTranfer(2)"
              >全部转发</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <tranfer-task v-if="showadd" :visableIf.sync="showadd" />
  </div>
</template>
<script>
import MaterialContent from "@/components/MaterialContent";
import TranferTask from "./TranferTask.vue";
export default {
  data() {
    return {
      rowitem: null,
      dataList: [
        {
          id: 1,
          title: "1111的任务",
          taskList: [
            {
              type: "text",
              contentType: "text",
              contentJson: "测试测试1",
              contentOrderIndex: 1,
            },
            {
              type: "text",
              contentType: "text",
              contentJson: "测试测试2",
              contentOrderIndex: 2,
            },
            {
              type: "text",
              contentType: "text",
              contentJson: "测试测试3",
              contentOrderIndex: 3,
            },
          ],
        },
        {
          id: 2,
          title: "2222的任务",
          taskList: [
            {
              type: "text",
              contentType: "text",
              contentJson: "测试测试2",
              contentOrderIndex: 2,
            },
          ],
        },
        {
          id: 3,
          title: "3333的任务",
          taskList: [
            {
              type: "text",
              contentType: "text",
              contentJson: "测试测试3",
              contentOrderIndex: 3,
            },
          ],
        },
        {
          id: 4,
          title: "4444的任务",
          taskList: [
            {
              type: "text",
              contentType: "text",
              contentJson: "测试测试4",
              contentOrderIndex: 4,
            },
          ],
        },
      ],

      checkedAll: false,
      showadd: false,
      tranferType: "",
    };
  },
  components: {
    MaterialContent,
    TranferTask,
  },
  methods: {
    handleItem(item) {
      this.rowitem = item;
    },

    handleDelete() {
      this.$message.success("删除成功");
    },

    handleTranfer(type) {
      this.tranferType = type;
      this.$msgBox
        .showMsgBox({
          title: "警告提示",
          content:
            "多群转发任务不能创建多条，新建任务将删除当前任务记录，是否继续？",
          showCancelButton: false,
        })
        .then(() => {
          this.showadd = true;
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.save_left {
  width: 350px;
  overflow: hidden;
  overflow-y: auto;
}
.save_right {
  flex: 1 0;
  height: 100%;
  border-left: 1px solid #e9e9e9;
}
.s_title {
  height: 55px;
  line-height: 55px;
}
.s_list {
  height: calc(100% - 55px);
}
.s_item {
  padding: 8px 12px;
  &.active {
    background-color: rgba(47, 84, 235, 0.12);
    .s_text {
      color: #3070ff;
    }
  }
}
.s_itemleft {
  width: 86%;
}
.s_itemright {
  width: 14%;
}
.r_content {
  height: calc(100% - 110px);
  overflow: hidden;
  overflow-y: auto;
  border-top: 1px solid #e9e9e9;
}
.r_footer {
  height: 55px;
  border-top: 1px solid #e9e9e9;
}
.rlist_item {
  min-height: 60px;
  &:hover {
    background-color: #f5f5f5;
  }
}
.chat-item-content {
  flex: 1 1;
}
.chat-bubble {
  max-width: 360px;
  word-break: break-all;
  width: fit-content;
  padding: 6px 12px;
  font-size: 15px;
  color: #000;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 5px;
}
</style>